# Component: Media Archive Detail

Full-featured video player interface with metadata and subtitles

Media Block

### BEM Anatomy

| Type      | Class Name                 | Description                                                                                             |
| --------- | -------------------------- | ------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-media-archive-detail` | The main container. Manages vertical spacing between the card and the keyword tags.                     |
| Element   | `__card`                   | The primary visual wrapper (often using card-style shadow/background) for the video and top-level info. |
| Element   | `__video`                  | A `ratio-16x9` container housing the iframe or thumbnail fallback.                                      |
| Element   | `__image`                  | The poster or fallback image displayed before the video is initialized or if playback fails.            |
| Element   | `__accordion`              | Wrapper for the collapsible description and subtitle sections.                                          |
| Element   | `__subtitles`              | Container for interactive subtitles. Fixed `300px` max-height with internal scrolling.                  |
| Element   | `__footer`                 | The bottom section of the detail view containing metadata and interaction buttons.                      |
| Element   | `__meta-data`              | A flex container in the footer that distributes date, category, and provider info.                      |
| Element   | `__meta`                   | The base unit for a metadata entry, providing consistent typography and icon alignment.                 |
| Modifier  | `__meta--date`             | Styles the metadata specifically for publication dates (e.g., italics or calendar icon).                |
| Modifier  | `__meta--category`         | Styles the metadata for taxonomy tags; may include background-color chips.                              |
| Modifier  | `__meta--provider`         | Contextual modifier to strip default link styling from provider buttons.                                |
| Element   | `__button`                 | Actionable elements within the detail view (e.g., Download, Share, or Play).                            |
| Element   | `__keywords`               | The container for SEO-friendly keyword tags located at the bottom of the block.                         |

### Logic & Layout

The component effectively blends custom BEM classes with Bootstrap's card system and utility ratios. The `as-state` elements provide loading feedback or clickable play overlays for non-embedded streams.

##### Generated HTML (Video State)

```html
<div class="as-media-archive-detail">
    <div class="as-media-archive-detail__card card">
        <div class="as-media-archive-detail__video ratio ratio-16x9">
            <iframe src="..."></iframe>
        </div>
        <div class="as-media-archive-detail__accordion">
            <!-- Accordion with .as-accordion elements -->
        </div>
        <div class="as-media-archive-detail__footer card-footer">
            <div class="as-media-archive-detail__meta-data">
                <div class="as-media-archive-detail__meta--date">...</div>
                <div class="as-media-archive-detail__meta--provider">...</div>
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-media-archive-detail {
  &__description {
    // Preserve line breaks from CMS data
    white-space: pre-line;
  }
  
  &__subtitles {
    max-height: 300px;
    overflow: auto;
  }

  &__meta-data {
    display: flex;
    justify-content: space-between;
  }
}
```
